<template>
  <el-dialog
    v-model="dialogFormVisible"
    style="width: 20vw; border-radius: 1ch"
    align-center
    model-class="model"
    class="dialog"
    @close="close"
  >
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <el-image :src="tempLogo" style="width: 38px; height: 25px"></el-image>
        <h4 :id="titleId" :class="titleClass">{{ opt }}</h4>
      </div>
    </template>
    <el-form :model="userInfo" :rule="rules" ref="formRef">
      <el-form-item prop="tele">
        <el-input v-model="userInfo.tele" placeholder="请输入手机号">
          <template #prefix>
            <el-icon><PhoneFilled /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="userInfo.passwd"
          placeholder="请输入密码"
          type="password"
        >
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="opt == '注册'">
        <el-input v-model="userInfo.name" placeholder="请输入用户名">
          <template #prefix>
            <el-icon><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer style="text-align: center">
      <span>
        <el-button type="danger" @click="handleClick" style="width: 75%">
          {{ opt }}
        </el-button>
      </span>
      <el-button v-if="opt == '登录'" @click="logon" class="logon"
        >注册</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted } from 'vue'
import { ref, reactive, watch } from 'vue'
import emiter from '@/utils/bus'
import { User, Lock, PhoneFilled } from '@element-plus/icons-vue'
import tempLogo from '@/assets/img/normal-logo-blue.png'
import { request } from '@/utils/request'
import { ElMessage } from 'element-plus'
import {useLoginstore} from '@/store/isLogin'

const store = useLoginstore();

let userInfo = reactive({
  tele:"11475271211",
  passwd:"0001"
})
const dialogFormVisible = ref(false)
const formRef = ref()
const opt = ref('登录')
watch(
  () => opt.value,
  (newValue) => {
    console.log(newValue)
  }
)
onMounted(() => {
  emiter.on('isShow', (value) => {
    dialogFormVisible.value = value
  })
})
const rules = {
  tele: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入电话号码'))
        } else if (value instanceof Number) {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
}

const handleClick = async () => {
  const json = JSON.stringify(userInfo)
  if (!(userInfo.passwd) || !(userInfo.tele)) {
    ElMessage({
      message: '请完成信息',
      type: 'error',
    })
    return
  } else if (opt.value == '注册') {
    //需要修改接口
    const resp = await request('/user/signin', { method: 'post', data: json })
    if (resp == 'success') {
      ElMessage({
        message: '注册成功，3s后返回登录',
        type: 'success',
      })
      setTimeout(() => {
        opt.value = '登录'
      }, 3000)
    } else {
      ElMessage({
        message: '出现错误',
        type: 'error',
      })
    }
  } else if (opt.value == '登录') {
    const resp = await request('/user/login', { method: 'post', data: json })
    window.localStorage.setItem('token', resp.token)
    window.localStorage.setItem('name', resp.name)
    store.$patch({isLogin:true})
    ElMessage({
      message: '登录成功',
      type: 'success',
    })
    
    close()
  }
}
const logon = () => {
  opt.value = '注册'
  userInfo = reactive({})
}
const close = () => {
  userInfo = reactive({})
  opt.value = '登录'
  dialogFormVisible.value = false
}
</script>

<style>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.dialog .el-dialog__footer {
  text-align: center;
}
.dialog .el-dialog__body {
  padding: 20px 30px 0 30px;
}
.logon {
  border: none !important;
  background-color: #fff !important;
  display: block !important;
  margin-left: auto;
  color: rgb(18, 20, 21);
}
.logon:hover {
  color: rgb(15, 17, 18);
  background-color: #fff !important;
}
</style>
